<template>
  <div class="app-container">
    <div v-if="isEmpty">
      <h2 style="text-align: center;">未连接到远程主机或已断开连接，请重新尝试</h2>
    </div>
    
    <div v-else>
      <div class="title-container">
        <div class="tips-container">
          如果控制台无响应:请点击下面灰色状态栏. <a :href="screen" style="text-decoration: underline">点击此处只显示控制台</a>. 要退出全屏模式，请点击浏览器的后退按键
        </div>
      </div>
      
      <div class="content-container">
        <iframe :src="screen" style="width: 100%; height: 100%;"></iframe>
      </div>
      
    </div>
  </div>
</template>

<script>
import { getVNC } from '@/api/machine'
import { mapGetters } from 'vuex'

export default {
  name: 'vncList',
  components: {},
  data() {
    return {
      activeName: null,
      query:{
        mid: '',
      },
      screen: null,
    }
  },
  computed: {
    ...mapGetters([
      'activeVM',
    ]),
    isEmpty(){
      return this.screen==null? true : false
    },
  },
  created() {
    if (this.activeVM != ''){
      this.getVNC()
    }
  },
  mounted () {
  },
  methods: {
    getVNC() {
      this.query.mid = this.activeVM
      getVNC(this.query).then(response => {
        this.screen = response.load
      }).catch(()=>{
        console.log("获取URL失败")
      })
    },
    
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 0px;
}

.title-container {
  height: 40px;
  width: 100%;
  background: #fff;
  overflow: hidden;
  .tips-container{
    padding: 10px;
    color: skyblue;
  }
}
.content-container{
  height: calc(100vh - 40px - 50px);
}
</style>
